<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 14:04:23
 * @LastEditTime: 2024-04-26 14:30:14
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\log_detail\components\map_com.vue
 * jiu
-->
<template>
   <view>
      <map id="map" ref="map" :longitude="longitude_start" :latitude="latitude_start" :markers="markers"
         :polyline="polyline" show-location style="width: 100vw; height: 100vh; z-index: 1" :max-scale="20"
         :min-scale="9">
      </map>
   </view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks"
import { nationwide_bounds, nationwide_src } from "@/enum"

let marker_item = {
   longitude: 0,
   latitude: 0,
   iconPath: '',
   width: 25,
   height: 26,
   id: 0,
   label: {
      content: '起',
      anchorX: -6,
      anchorY: -23,
      fontSize: 11,
   },
}
export default {
   props: ["detail"],
   data() {
      return {
         navigateTo,
         longitude_start: "",
         latitude_start: "",
         longitude_end: "",
         latitude_end: "",
         markers: [],
         polyline: [],

      }
   },
   onReady() {
      this.mapContext = uni.createMapContext("map", this);
      this.init()
   },
   onLoad(options) {

   },
   computed: {
      rec_url() {
         return this.$store.getters.rec_url;
      }
   },
   mounted() {

   },
   methods: {

      init() {
         console.log(this.detail);
         let path = this.detail.path;
         let data = JSON.parse(path);
         if (!data.length) return
         this.nationwide({ id: 998, src: nationwide_src, bounds: nationwide_bounds })//全国图层
         this.GroundOverlay()
         this.marker_push(data)
         this.polyline_fn(data)
      },
      //起终标记
      marker_push(data) {
         this.longitude_start = data[0].lng;
         this.latitude_start = data[0].lat;
         this.longitude_end = data.at(-1).lng;
         this.latitude_end = data.at(-1).lat;
         this.mapContext.moveToLocation({ longitude: +this.longitude_start, latitude: +this.latitude_start })
         this.add_marker({ id: 0, longitude: this.longitude_start, latitude: this.latitude_start, iconPath: '/static/images/begin_icon.png' }, "起")
         this.add_marker({ id: 1, longitude: this.longitude_end, latitude: this.latitude_end, iconPath: '/static/images/finish_icon.png' }, "终")
      },
      //路线
      polyline_fn(data) {
         this.polyline = [
            {
               points: data.map(item => ({ longitude: item.lng, latitude: item.lat })),
               color: "#ed6414",
               width: 6,
               arrowLine: true,
            },
         ];
      },
      //自定义图层
      GroundOverlay() {
         let spot_maps = this.detail.spot_maps
         let bounds = {
            northeast: {
               latitude: spot_maps.top_right_lat,
               longitude: spot_maps.top_right_lng,
            },
            southwest: {
               latitude: spot_maps.bottom_left_lat,
               longitude: spot_maps.bottom_left_lng
            },
         }
         this.nationwide({ id: 1, src: this.rec_url + spot_maps.hd_url, bounds })
      },
      //自定义图层添加
      nationwide({ id, src, bounds, }) {
         this.mapContext.addGroundOverlay({
            id,
            src,
            bounds,
            success(res) {
               console.log("wp", res);
            },
            fail(err) {
               console.log("wperr", err);
            },
         });
      },
      //替换标记
      add_marker(_marker_item, content) {
         let copay = {
            ...marker_item, ..._marker_item, label: {
               content,
               anchorX: -6,
               anchorY: -23,
               fontSize: 11,
            }
         }
         this.markers.push(copay)
      },
   }
}
</script>


<style lang="scss" scoped></style>
